@import "../../style/public";

.split-info {
  display: block;
  width: pw(355);
  margin: pw(10) auto pw(10);
  background-color: #fff;
  border-radius: pw(10);
  padding: 0 pw(15) 0;
  @extend %box-sizing;

  &-list {
    color: #666;
    width: pw(325);
    height: pw(44);
    @extend %box-sizing;
    font-size: 0.7rem;
    display: flex;
    // display: flex;
    // align-items: center;
    // justify-content: space-between;
    border-top: solid pw(1) #EEE;

    .name {
      display: inline-block;
      width: 60%;
    }
  }

  &-list:first-child {
    border: none !important;
  }
}

.accountStatement-list {
  .sub-tip {
    @include remCalc(font-size, 24);
    color: #cecece;
    border-bottom: solid #ccc 1px;
    padding-bottom: 10px;
  }

  .areabig {
    position: relative;

    &::after {
      content: "";
      position: absolute;
      @include remCalc(top, -50);
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 1;
    }
  }
}
.split-info {
  display: block;
  position: relative;
  background-color: #fff;
  &-list {
    color: #666;
    font-size: 0.7rem;
    display: block;
    font-size: 0.7rem;
    border-bottom: 1px solid #ddd;
    .name {
      display: inline-block;
      position: relative;
      width: 60%;
    }
  }
}
.accountStatement-list {
  .sub-tip{
    @include remCalc(font-size, 24);
    color:#cecece;
  }
  .areabig{
    position: relative;
    &::after{
      content: "";
      position: absolute;
      @include remCalc(top, -50);
      bottom:0;
      left:0;
      right:0;
      z-index: 1;
    }
  }
  .notice {
    background: #fdfcec;
    @include remCalc(font-size, 20);
    @include remCalc(height, 60);
    @include remCalc(line-height, 60);
    @include remCalc(padding, 0, 30);
    color: #f87c36;
    display: inline-flex;
    align-items: center;
    width: 100%;
    box-sizing: border-box;

    img {
      width: pw(16) !important;
      height: pw(16) !important;
      margin-right: pw(6);
    }
  }

  .empty-msg {
    img {
      width: pw(16) !important;
      height: pw(16) !important;
      margin-right:pw(6);
    }
  }
  .empty-msg{
    @include remCalc(font-size, 30);
    @include remCalc(padding, 30);
    color: #ccc;
    text-align: center;

    .bg {
      @include remCalc(width, 200);
      @include remCalc(height, 180);
      @include remCalc(margin, 60, auto, 30, auto);
    .bg{
      @include remCalc(width, 200);
      @include remCalc(height, 180);
      @include remCalc(margin, 60,auto,30,auto);
      background: url(../../../static/images/no-data.png) 0 0 no-repeat;
      background-size: cover;
    }
  }
}
}

  .trade-store-title {
    @include remCalc(font-size, 24);
    @include remCalc(padding, 20, 30, 0, 30);
    color: #999;
  }

  .trade-store-title{
    @include remCalc(font-size, 24);
    @include remCalc(padding, 20,30,0,30);
    color: #999;
  }
  .hide {
    position: absolute;
    left: -9999px;
  }

  .date-picker {
    box-sizing: border-box;
    @include remCalc(padding, 0, 30);
    @include remCalc(height, 68);
    @include remCalc(line-height, 68);
    display: inline-flex;
    align-items: center;
    @include remCalc(font-size, 24);
    color: #999;

    i {
      @include remCalc(padding-right, 12);
    }
  }
  .data-list-child{
    padding-top: pw(10);
    >li{
      &:first-child {
          border: none !important;
        }
    }
  }
  .date-list {
    // @include remCalc(padding, 0, 0,0,30);
    width: pw(355);
    background: #fff;
    margin: 0 auto;
    @include remCalc(margin-bottom, 60);

    &:last-child {
      border-radius: 0 0 pw(10) pw(10);
    }
    >li{
      @include remCalc(padding, 20, 30,20,30);
      display: flex;
      align-items: center;
      justify-content: space-between;
      // @include thin-border(false,false,top);
      border-top: solid pw(1) #EEE;

      &:first-child {
        
        &::after {
          display: none;
        }
      }

      >span {
        color: #333;
        font-weight: 500;
        font-size: pw(14);
      }
        &:first-child{
          &::after{
            display: none;
          }
        }
        >span{
          color:#333;
          font-weight: 500;
          @include remCalc(font-size, 28);
          @include remCalc(padding-right, 30);
        }

      >div {
        flex: 1;
        text-align: right;
        color: #333;
        @include remCalc(font-size, 30);

        .bs {
          color: #999;
        }}
      >div{
        flex:1;
        text-align: right;
        color:#333;
        @include remCalc(font-size, 30);
        .bs{
          color:#999;
          @include remCalc(font-size, 20);
          @include remCalc(padding-top, 6);
        }
      }

      i {
        @include remCalc(font-size, 32);
        color: #262626;
      i{
        @include remCalc(font-size, 32);
        color:#262626;
        @include remCalc(margin-left, 12);
      }
    
  }
  }
}

  .bill-list {
    >li {
      &.total {
        padding-top: 0;
      }
    }}

  .bill-list {
    > li {
      &.total{
       padding-top:0;
      }
      background: #fff;
      position: relative;
      @include thin-border(true);
      // @include remCalc(margin-top, 20);
      @include remCalc(padding, 20, 0);

      .store-name {
        @include remCalc(font-size, 32);
        color: #333;
        @include remCalc(line-height, 50);
        @include remCalc(padding, 0, 30, 20, 30);
        @extend %text-overflow-2;
        // box-sizing: border-box;
      }

      .bottom {
        position: relative;
        @include thin-border(false, false top);

      .bottom {
        position: relative;
        @include thin-border(false, false top);
        //border-top:1px solid #ddd;
        .item {
          @include remCalc(margin, 0, 0, 0, 30);
          @include remCalc(padding, 16, 30, 16, 0);
          // @include thin-border(false,false,top);
          color: #333;
          display: flex;
          align-items: center;

          &:first-child {
            &::after {
              display: none;
            }
          }

          &:first-child{
            &::after{
              display: none;
            }
          }
          .title {
            @include remCalc(font-size, 32);
            @include remCalc(margin-right, 20);
          }

          >div {
            text-align: right;
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: flex-end;

            .zhk-list_rarrow {
              color: #ccc;
            }
          }

          >div{
            text-align: right;
            flex:1;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            .zhk-list_rarrow{
              color:#ccc;
            }
          }
          .fh {
            @include remCalc(font-size, 32);
            @include remCalc(margin-right, 8);
          }

          .amount {
            @include remCalc(font-size, 30);
          }
        }

        
        .detail {
          @include remCalc(padding, 0, 30);
          > li {
            @include remCalc(font-size, 28);
            @include remCalc(padding, 6, 0);
            color: #666;
            display: flex;

            >div {
              align-items: center;
            }

            .jine {
              flex: 1;
              display: flex;
            }
            .bishu {
              @include remCalc(width, 320);
              display: flex;
            }

            .fh {
              @include remCalc(margin, 0, 8, 0, 20);
            }

            span {
              &:first-child {
                width: 5em;
                white-space: nowrap;
              }
            }
          }
        }
      }
    }
  }
  .nav-bar {
    display: flex;
    background: #fff;
    @include thin-border(false, false, bottom);
    li {
      @include remCalc(height, 88);
      @include remCalc(line-height, 88);
      flex: 1;
      text-align: center;
      position: relative;
      @include remCalc(font-size, 32);
      color: #333333;
      span {
        display: inline-block;
        @include remCalc(padding, 0, 42);
        position: relative;
      }
      &:first-child {
        &::before {
          content: "";
          position: absolute;
          @include remCalc(top, 10);
          @include remCalc(height, 68);
          width: 1px;
          background: #ddd;
          right: 0;
        }
      }

      &.active {
        color: $color-red;

        span {
          &::before {
            content: "";
            @include remCalc(height, 4);
            left: 0;
            bottom: 0;
            background: $color-red;
            position: absolute;
            width: 100%;
          }
        }
      }
    }
  }
  .btn {
    width: 100%;
    @include remCalc(font-size, 36);
    @include remCalc(height, 88);
    @include remCalc(line-height, 88);
    background: $color-red;
    color: #fff;
    text-align: center;
  }

  .send-email {
    @include remCalc(padding, 30);
    text-align: center;

    .title {
      @include remCalc(font-size, 32);
      @include remCalc(padding, 30);
    }
    input {
      @include remCalc(height, 60);
      @include remCalc(padding, 0, 10);
      box-sizing: border-box;
      width: 100%;
      border: 1px solid #ddd;
      // -webkit-appearance: none;
    }
  }
  .btn {
    background: $color-red;
  }
}

.accountStatement-details {
  width: 100%;
  height: 100%;

  .bgw {
    background: #fff;
    width: pw(355);
    margin: 0 auto;
    @include remCalc(margin-top, 20);
    border-radius: pw(10) pw(10) 0 0;
  }

  .expand-section {
    text-align: center;
    border-radius: 0 0 pw(10) pw(10);
    @include remCalc(font-size, 24);
    padding: 0;
    color: #666;
    margin-bottom: pw(50);

    >div {
      @include remCalc(padding, 20, 0);
      background-color: #fff !important;
      border-radius: 0 0 pw(10) pw(10);
    }
  }

  .shop-name {
    @include remCalc(padding, 20, 30, 0, 30);
    @include remCalc(font-size, 24);
    color: #999;
  }

  .section {
    width: pw(355);
    border-radius: 0 0 pw(10) pw(10);
    background: #fff;
    margin: 0 auto;
  }

  .details-list {
    background-color: $background;
    padding: pw(10) pw(15) pw(10);
    @include remCalc(border-radius, 8);
    background: #fff;

    >li {
      position: relative;
      width: pw(325);
      height: pw(96);
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      background-color: #f5f5f5;
      border-radius: pw(8);
      @include remCalc(padding-top, 20);
      @include remCalc(margin-top, 20);
      @include remCalc(font-size, 30);

      &:first-child {
        margin-top: 0;
      }

      .pay-type {
        @include remCalc(font-size, 28);
        font-weight: 400;
        @include remCalc(padding, 0, 30);
        color: #333;
        position: relative;

        >span {
          @include remCalc(font-size, 32);
          font-weight: 400;
        }
      }

      .bottom {
        @include remCalc(padding, 14, 0);
        color: #666;
        @include remCalc(font-size, 24);
        display: flex;
        flex-wrap: wrap;

        >li {
          box-sizing: border-box;
          width: 50%;
          @include remCalc(padding, 6, 30);
          display: flex;
          color: #666;

          >span:nth-child(1) {
            @include remCalc(padding-right, 20);
            color: #666;
          }

          >span:nth-child(2) {
            color: #333;
          }
        }
      }
    }
  }
}

.accountStatement-filterItem {
  width: 100%;
  height: 100%;

  .section {
    @include remCalc(padding, 0, 40);
    color: #333;

    .title {
      @include remCalc(font-size, 32);
      @include remCalc(padding, 40, 0, 28, 0);
    }
    .picker-val-span{
        width: pw(270) !important;
        text-align: left !important;
        padding-left: pw(20)
    }
    .picker-val {
      @include remCalc(font-size, 28);
      @include remCalc(height, 80);
      box-sizing: border-box;
      display: inline-flex;
      align-items: center;
      width: 100%;
      justify-content: space-between;
      .picker-val-p{
        width: pw(8);
        height: pw(1);
        background: #333;
      }
      >span{
        display: block;
        width: pw(120);
        height: pw(36);
        background: #F3F3F3;
        line-height: pw(36);
        text-align: center;
        color: #333;
        font-size: pw(14);
        font-weight: 400;
        border-radius: pw(36);
      }
    }

    .check-list {
      display: flex;
      flex-flow: wrap;
      align-content: space-between;
      justify-content: space-between;
      @include remCalc(height, 164);
      //justify-content: space-around;
      li {
        text-align: center;
        //@include remCalc(padding, 0, 76);
        @include remCalc(width, 168);
        @include remCalc(height, 72);
        @include remCalc(line-height, 72);
        @include remCalc(font-size, 28);
        text-align: center;
        color: #333;
        background: #f6f6f6;
        border: 1px solid #eeeeee;
        border-radius: pw(80);
        box-sizing: border-box;
        position: relative;
        overflow: hidden;
        i {
          color: #fff;
          position: absolute;
          @include remCalc(font-size, 16);
          @include remCalc(right, 6);
          @include remCalc(bottom, 2);
          display: none;
        }
        &.checked {
          background: #FCE4E3;
          color: $color-red;
          border: 1px solid #ff211A;
          i {
            display: block;
          }
          
        }
      }
    }
  }
  .btn-wrap-padding{
    padding: 0 !important;
  }
  .btn-wrap-left{
    border-radius: pw(10) 0 0 pw(10);
  }
    .btn-wrap-right {
      border-radius:0 pw(10) pw(10) 0;
    }
  .btn-wrap {
    position: fixed;
    width: pw(270);
    height: pw(50);
    bottom: pw(30);
    left: 50%;
    margin-left: pw(-135);
    // width: 100%;
    display: flex;
    box-sizing: border-box;
    border-radius: pw(10);
    border: solid pw(1) #FF211A;
    // box-shadow: 0 -2px 8px 0 #cccccc;
    // @include thin-border(true, true);

    >div {
      // flex: 1;
      width: 50%;
      @include remCalc(font-size, 36);
      @include remCalc(height, 98);
      @include remCalc(line-height, 98);

      text-align: center;

      &+div {
        background: $color-red;
        color: #fff;

        &::before {
          border-color: $color-red;
        }

        &::after {
          border-color: $color-red;
        }
      }

      background: #fff;
      color: #121f33;
    }
  }
}

.section-other {
  background: #fff;
  @include remCalc(margin, 20, 0, 0, 0);

  .detail {
    display: block;

    li {
      width: 100%;
    }
  }
}

.detail {
  padding: 0 pw(15) 0;
  width: pw(355);
  @extend %box-sizing;

  >li {
    width: pw(325);
    height: pw(44);
    border-top: #EEE solid pw(1);
    box-sizing: border-box;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: space-between;

    >span:nth-child(1) {
      font-size: pw(14);
      font-weight: 400;
    }

    >span:nth-child(2) {
      font-size: pw(16);
      font-weight: 400;
    }
  }
}

.detail-cell {
  width: pw(355);
  height: pw(64);
  display: flex;
  align-items: center;
  justify-content: center;
  @include remCalc(font-size, 36);
  color: #333;
  display: flex;
  align-items: center;

  .title {
    font-size: pw(16);
    font-weight: 500;
    height: pw(20);
  }

  >div {
    font-size: pw(24);
    font-weight: 700;
    margin-left: pw(10);
    line-height: pw(63);
  }
}

.control-tab {
  display: flex;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid $color-red;
  overflow: hidden;
  @include remCalc(margin, 20, 30, 0, 30);
  @include remCalc(border-radius, 12);

  li {
    flex: 1;
    text-align: center;
    color: $color-red;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    @include remCalc(font-size, 28);
    @include remCalc(height, 88);
    &.active {
      color: #fff;
      background-color: $color-red;
    }
    &:nth-of-type(n+2) {
      border-left: 1px solid$color-red;
    }
  }
}
.view-header-k{
  border-radius: pw(10) !important;
  margin-bottom: pw(10) !important;
}

.date-text {
  display: flex;
  align-items: center;
  justify-content: left;
  color: #333;
  // background: #fff;
  @include remCalc(border-radius, 20, 20, 0,0);
  @include remCalc(padding, 20, 30, 0);
  box-sizing: border-box;
  width: pw(355);
  margin: auto;

  >span {
    font-weight: 500;
    font-size: pw(14);
    color: #333;
  }
}

.list-title {
  @include remCalc(font-size, 28);
  @extend %box-sizing;
  border-radius: pw(10) pw(10) 0 0;
  font-weight: 500;
  color: #333;
  width: pw(355);
  height: pw(50);
  line-height: pw(50);
  padding-left: pw(15);
  background: #fff;
  margin: 0 auto;
  &.g9 {
    color: #999;
  }
}

.bill-list {
  &.bill-list_day {
    margin-top: 1px;
    @include thin-border(false, false);

    >li {
      @include remCalc(padding, 10);

      &:before {
        width: 0;
      }

      .bottom {
        &:after {
          width: 0;
        }
        .item:nth-of-type(n+3):after {
          width: 0;
        }
      }
    }
  }
  .text-overflow-2 {
    @extend %text-overflow-2
  }
}

.tc {
  text-align: center;
}

.mt20 {
  @include remCalc(margin, 20, 0, 0, 0);
}

.overview-header {
  color: #333;
  width: pw(355);
  margin: 0 auto 0;
  background-color: #fff;
  @include remCalc(font-size, 28);
  border-radius: 0 0 pw(10) pw(10);

  .tc {
    @include remCalc(font-size, 28);
    @include remCalc(padding, 30, 0, 0, 0);

    i {
      color: #ccc;
    }
  }

  .tip {
    @include remCalc(padding, 0, 0, 30, 0);
    @include remCalc(font-size, 24);
    color: #ccc;
    text-align: center;
  }

  .overview-header_flex {
    display: flex;
    color: #333;
    @include remCalc(padding-bottom, 35);
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    .overview-header_flex-item {
      flex: 1;
      text-align: center;
      @include remCalc(font-size, 36);
      >p:nth-of-type(1) {
        color: #666;
        @include remCalc(font-size, 28);
        @include remCalc(margin-bottom, 15);
      }
    }
  }
  .overview-header_total {
    color: #FF211A;
    @include remCalc(padding, 20, 0, 20);
    display: flex;
    align-items: baseline;
    justify-content: center;

  }
  .zhk-list_rarrow {
    position: relative;
    @include remCalc(top, 3);
  }
}



.arrow {
  @include remCalc(margin, 0, 6, 0, 10);
  position: relative;
  @include remCalc(top, -2);
  display: inline-block;

  &:after {
    content: " ";
    display: inline-block;
    transform: rotate(135deg);
    // height: 8px;
    // width: 8px;
    // border-width: 2px 2px 0 0;
    @include remCalc(width, 16);
    @include remCalc(height, 16);
    @include remCalc(border-width, 4, 4, 0, 0);
    border-color: #c7c7cc;
    border-style: solid;
    outline: 1px solid transparent;
    pointer-events: none;
    position: relative;
  }
  &.active:after {
    @include remCalc(top, 8);
    transform: rotate(-45deg);
  }
}

.zhk-nav_filter {
  color: #000 !important;
  font-weight: 500;
  font-size: pw(14) !important;
  margin-right: pw(5);
}

.zhk-nav_xuan {
  color: #000 !important;
  font-weight: 500;
  font-size: pw(14) !important;
}
.main-content{
  background: #fff;
  border-radius: pw(20) pw(20) 0 0;
  width: pw(355);
  margin: pw(10) auto 0;
}
.overview-header_flex-line{
  width: pw(1);
  height: pw(30);
  background: #c6c6c6;
}
.overview-header_total_int{
  font-weight: 700  !important;
  font-size: pw(40)  !important;
  line-height: pw(40);
}
.overview-header-total-intint {
  font-weight: 700 !important;
  font-size: pw(24) !important;
  line-height: pw(40);
}
.listday{
  border-radius:pw(10);
  width: pw(355);
  margin:pw(10) auto 0;
  background: #fff;}
